import React, { Fragment, useState} from "react";
import { Button, Table, Space, Popconfirm} from "antd";
import { PicRightOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";

import TimeShow from "./../../../components/TimeShow";
import { getPhaList, deletePharmacist } from "./../../../api/pharmacist";

function PharmacistManage(props) {
  const history = useHistory(); // 跳转传参
  const [pharmacist, setPharmacist] = useState([]);
  useState(() => {
    getPhaList().then((res) => {
      console.log(res.data.resultarr);
      setPharmacist(res.data.resultarr);
    });
  }, []);
  console.log(pharmacist);
  const cancel = () => {};
  const goDetail = (text) => {
    console.log(text);
    history.push("/content/EditPharmacist?pharmacistid=" + text);
  };
  const goDelete = (pharmacistid, index) => () => {
    console.log(pharmacistid);
    deletePharmacist({ pharmacistid: pharmacistid }).then((res) => {
      // 解决删除后需手动刷新才可以更新视图的问题
      let arr = JSON.parse(JSON.stringify(pharmacist));
      arr.splice(index, 1);
      setPharmacist(arr);
      //   setTotal(total - 1)
      console.log(res.data);
    });
  };
  const columns = [
    {
      title: "序号",
      align: "center",
      key: "pharmacistid",
      render: (text, record, index) => (
        <span>{(current - 1) * pageSize + index + 1}</span>
      ),
    },
    {
      title: "头像",
      align: "center",
      dataIndex: "avatar",
      //   key: "avatar",
      key: "pharmacistid",

      render: (text, record, index) => (
        <img src={text} alt="" style={{ height: "80px" }} />
      ),
    },
    {
      title: "姓名",
      align: "center",
      dataIndex: "name",
      //   key: "name",
      key: "pharmacistid",
    },
    {
      title: "状态",
      align: "center",
      dataIndex: "isshow",
      key: "pharmacistid",
      //   key: "isshow",
      render: (text, record, index) => (text === true ? "展示" : "下架"),
    },
    {
      title: "加入时间",
      align: "center",
      dataIndex: "regtime",
      key: "pharmacistid",
      render: (text, record, index) => {
        return <TimeShow time={text} />;
      },
    },
    {
      title: "操作",
      align: "center",
      dataIndex: "pharmacistid",
      key: "pharmacistid",
      render: (text, record, index) => {
        return (
          <Space>
            <span
              style={{ color: "#f00", cursor: "pointer" }}
              onClick={() => goDetail(text)}
            >
              编辑
            </span>

            <span
              style={{ color: "#f00", cursor: "pointer" }}
              //   onClick={() => goDetail(text)}
            >
              查看评论
            </span>

            <Popconfirm
              title="确定删除?"
              onConfirm={goDelete(
                record.pharmacistid,
                (current - 1) * pageSize + index
              )}
              onCancel={cancel}
              okText="确定"
              cancelText="取消"
            >
              <span style={{ color: "#f00", cursor: "pointer" }}>删除</span>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

    //分页设置
    const [pageSize, setPageSize] = useState(5);
    const [current, setCurrent] = useState(1);

    return (
        <Fragment>
            <span className="indexTitle">
                <PicRightOutlined />
        用户列表
        <Button
                    type="primary"
                    className="AddBanner"
                    onClick={() => props.history.push("/content/AddPharmacist")}
                >
                    新增药师
        </Button>
            </span>
            <Table
                dataSource={pharmacist}
                columns={columns}
                rowKey={(record) => record.pharmacistid}
                bordered={true}
            />
        </Fragment>
    );
}

export default PharmacistManage;
